<template>
    <div style="background-color: rgb(84, 92, 100);">
        <!--<el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" router @open="handleOpen" @close="handleClose" 
            :collapse="isCollapse">-->
        <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" router>
            <!--<div class="infor">
                <i class="el-icon-menu" @click="showCollapse"></i>
                <div v-show="!isCollapse" class="txt">天意美业直通车</div>
            </div>-->
            <div class="infor">
                <i class="el-icon-menu"></i>
                <div class="txt">天意美业直通车</div>
            </div>
            <el-menu-item index="/" class="meau_list">
                <i class="el-icon-s-home"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="/user" class="meau_list">
                <i class="el-icon-s-check"></i>
                <span slot="title">会员管理</span>
            </el-menu-item>
            <el-menu-item index="/user/file" class="meau_list">
                <i class="el-icon-present"></i>
                <span slot="title">会员档案</span>
            </el-menu-item>
            <el-menu-item index="/mark" class="meau_list">
                <i class="el-icon-s-order"></i>
                <span slot="title">预约管理</span>
            </el-menu-item>
            <el-menu-item index="/mark/timeTable" class="meau_list">
                <i class="el-icon-more-outline"></i>
                <span slot="title">预约时间表</span>
            </el-menu-item>
            <el-menu-item index="/project" class="meau_list">
                <i class="el-icon-office-building"></i>
                <span slot="title">项目管理</span>
            </el-menu-item>
            <el-menu-item index="/goods" class="meau_list">
                <i class="el-icon-s-goods"></i>
                <span slot="title">商品管理</span>
            </el-menu-item>
            <el-menu-item index="/cost" class="meau_list">
                <i class="el-icon-s-unfold"></i>
                <span slot="title">支出费用</span>
            </el-menu-item>
            <el-menu-item index="/form" class="meau_list">
                <i class="el-icon-s-platform"></i>
                <span slot="title">报表统计</span>
            </el-menu-item>
            <el-menu-item index="/staff" class="meau_list">
                <i class="el-icon-s-grid"></i>
                <span slot="title">员工管理</span>
            </el-menu-item>
            <el-menu-item index="/log" class="meau_list">
                <i class="el-icon-s-data"></i>
                <span slot="title">业务日志</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
 
<script>
    export default {
        name: 'app-header',
        data () {
            return {
                isCollapse: true,
                hclass:'',
                show:false,
                nowLocation:'首页',
                routeArr:[]
            }
        },
        methods:{
            showCollapse:function(){
                this.isCollapse = !this.isCollapse
                if(this.isCollapse){
                    console.log('')
                }
            },
            handleOpen(key, keyPath) {
                //console.log(1111)
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                //console.log(2222)
                // console.log(key, keyPath);
            },
            pageResize(){
                var h = document.documentElement.clientHeight || document.body.clientHeight;
                this.hclass = "width:150px;background:#20222A;height:"+h+"px";
            },
            getRoute:function(){
                var data = {user_id:localStorage.getItem('user_id')}
                var that = this
                this.$get('role/route',data).then((res) => {
                    that.routeArr = res.data
                })
            }
        },
        created(){
            //console.log(this.$route)
            this.nowLocation = this.$route.name;
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            this.hclass = "width:150px;background:#20222A;height:"+h+"px";
            // console.log(h)
            //this.getRoute()
        },
        mounted(){
            let _this = this;//赋值vue的this
            window.onresize = ()=>{
        　　　　//调用methods中的事件
                _this.pageResize();
            }
        },
    }
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
    min-height: 400px;
}
.txt{
    font-size:13px;color:aliceblue;margin-left:5px;
    }
.infor{
    height: 50px;
    border-bottom:4px solid #f8f8f8;
    margin-left: 0;
    display:flex;
    align-items: center;
}
.el-icon-menu{
    color:#fff;
    margin-left: 20px;
}
.el-menu{
border-right: none;
}
.meau_list{
    padding-left:10px !important;
    height:45px;
    line-height:45px;
}
.el-submenu__title{
    padding-left:10px !important; 
}
</style>